<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue';

const screenWidth = ref(window.innerWidth);
// 用于储存选中的数据
const selectedItem = ref([])

// 用来存储当前激活的菜单项索引
const activeIndex = ref<number>(0); // 默认为第一个菜单项

// 消息中心  tab栏
const sidermenu = reactive([
  { id: 1, title: '我的消息' },
  { id: 2, title: '系统公告' },
])

// 子组件数据 (我的消息)
const messageData = reactive([
  { id: 1, count: 1, time: '今天', text: '【我的消息】', message: '系统将在今晚进行维护，预计停机1小时，请做好备份。' },
  { id: 2, count: 1, time: '昨天', text: '【我的消息】', message: '最新版本的IDE已上线，增加了新功能并修复了一些Bug，快来更新吧！' },
  { id: 3, count: 1, time: '三天前', text: '【我的消息】', message: '我们将在本周五举行开发者分享会，邀请了行业大牛来分享经验，欢迎报名！' },
  { id: 4, count: 1, time: '五天前', text: '【我的消息】', message: '因需求调整，API接口文档已更新，请前往查看并及时更新代码！' },
  { id: 5, count: 1, time: '一周前', text: '【我的消息】', message: '下周将开始代码质量审查，所有项目请确保按照最新的编码规范提交代码。' },
  { id: 6, count: 1, time: '两周前', text: '【我的消息】', message: '系统安全漏洞修复完成，所有用户需强制更新版本以保证安全。' },
  { id: 7, count: 1, time: '三周前', text: '【我的消息】', message: '我们将会在下个月迁移到新的服务器，请做好数据备份。' },
  { id: 8, count: 1, time: '四周前', text: '【我的消息】', message: '新的代码审查工具已经启用，所有团队成员都需要使用它来进行代码提交前的检查。' },
  { id: 9, count: 1, time: '一个月前', text: '【我的消息】', message: '为了提升开发效率，所有开发人员需要加入CI/CD流程，自动化测试将从下周开始启用。' },
  { id: 10, count: 1, time: '两个月前', text: '【我的消息】', message: '我们将开展一次全员编程比赛，欢迎各位开发者报名参与，获胜者将获得丰厚奖励！' },
])


// 父组件数据 (系统公告)
const items = reactive(
  [
    { id: 1, count: 1, time: '昨天', text: '【公告】', message: '系统将在明日进行维护，敬请谅解。' },
    { id: 2, count: 1, time: '三天前', text: '【公告】', message: '新增功能已上线，快来体验最新的玩法！' },
    { id: 3, count: 1, time: '一星期前', text: '【公告】', message: '七夕特别活动已上线，快来参与赢奖励！' },
    { id: 4, count: 1, time: '两小时前', text: '【公告】', message: '服务器优化完成，系统运行更加流畅！' },
    { id: 5, count: 1, time: '五分钟前', text: '【公告】', message: '新增的安全更新已完成，请及时更新应用版本。' },
    { id: 6, count: 1, time: '一小时前', text: '【公告】', message: '全新界面上线，优化用户体验，欢迎反馈意见。' },
    { id: 7, count: 1, time: '两天前', text: '【公告】', message: '端午节活动即将开启，提前预览活动详情吧！' },
    { id: 8, count: 1, time: '三天前', text: '【公告】', message: '夏季特惠活动火热进行中，优惠不容错过！' },
    { id: 9, count: 1, time: '四天前', text: '【公告】', message: '近期发现部分用户反馈问题已解决，感谢支持！' },
    { id: 10, count: 1, time: '一星期前', text: '【公告】', message: '平台将新增隐私保护功能，提供更安全的服务。' },
    { id: 11, count: 1, time: '两小时前', text: '【公告】', message: '新版帮助中心上线，提供更详细的使用指南！' },
    { id: 12, count: 1, time: '五天前', text: '【公告】', message: '请注意账号安全，不要轻信陌生链接和信息。' },
    { id: 13, count: 1, time: '六小时前', text: '【公告】', message: '感谢您对平台的支持，特别奖励即将发放！' },
    { id: 14, count: 1, time: '三小时前', text: '【公告】', message: '我们已更新用户协议，请仔细阅读以便了解变化。' },
    { id: 15, count: 1, time: '两天前', text: '【公告】', message: '端午节活动排行榜已发布，快来查看名次吧！' },
  ]
)

// 封装clearCounts 方法
const clearCounts = (data: { count: number }[]) => {
  data.forEach(item => {
    item.count = 0  // 清空信息数据
  })
}

// 全部已读
const confirm = (e: MouseEvent) => {
  message.success('全部已读！');
  if (activeIndex.value === 0) {
    clearCounts(messageData); // 清空我的消息的 count
    console.log('全部已读完成：我的消息', messageData)
  } else {
    clearCounts(items);  // 清空系统公告 count
    console.log('全部已读完成：系统公告', items)
  }
};

// 设置激活项
const setActive = (index: number) => {
  activeIndex.value = index;
};



// 更新 count 方法
const handlePreview = (receivedData, dataSource) => {
  selectedItem.value = receivedData   // 更新选中的数据
  console.log('当前选中的数据', selectedItem.value)

  // 更新传入的 dataSource 数据
  const target = dataSource.find((item) => item.id === receivedData.id);
  if (target) {
    target.count = 0; // 更新 count

    // 当被点击时 已读 数据 拍到后面
    // const index = dataSource.indexOf(target);
    // if (index > -1) {
    //   dataSource.splice(index, 1); // 移除该项
    //   dataSource.push(target); // 将项推送到数组的末尾
    // }
  }
}



const headerStyle: CSSProperties = {
  backgroundColor: '#fff',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginBottom: '.625rem',
}

const siderStyle: CSSProperties = {
  textAlign: 'center',
  lineHeight: '5rem',
  backgroundColor: '#fff',
  marginRight: '.625rem',
}

const updateScreenSize = () => {
  screenWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <a-layout class="notice-layout">
    <a-layout-sider :style="siderStyle" :width="screenWidth > 768 ? '12.5rem' : '6.25rem'">
      <div class="sider-header">
        <h3>
          <InfoCircleOutlined />
          消息中心
        </h3>
      </div>
      <ul class="sider-menu" v-for="(item, index) in sidermenu" :key="index">
        <li :class="{ 'active': activeIndex === index }" @click="setActive(index)">{{ item.title }}</li>
      </ul>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="headerStyle">
        <span class="header-notice">通知</span>
        <div class="header-actions">
          <ul>
            <li class="active header-action-item">消息设置</li>
            <a-popconfirm title="你确定你要这样做吗?" ok-text="确定" cancel-text="取消" @confirm="confirm">
              <li class="header-action-item">全部已读</li>
            </a-popconfirm>
          </ul>
        </div>
      </a-layout-header>

      <!-- 我的消息 -->
      <a-layout-content class="content-style" v-if="activeIndex === 0">
        <educ-inform v-for="(item, index) in messageData" :key="index" :data="item"
          @preview="(data) => handlePreview(data, messageData)" />
        <!-- 系统详情 -->
        <educ-view-announcement :data="selectedItem" />
      </a-layout-content>

      <!-- 系统公告 -->
      <a-layout-content class="content-style" v-else>
        <educ-inform v-for="(item, index) in items" :key="index" :data="item"
          @preview="(data) => handlePreview(data, items)" />
        <!-- 系统详情 -->
        <educ-view-announcement :data="selectedItem" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.notice-layout {
  height: 80vh;
}

// 侧边栏头部样式
.sider-header {
  h3 {
    color: #999;
  }
}

.content-style {
  /* 隐藏超出内容 */
  overflow: auto;
  background-color: #fff;
}


// 头部操作区域样式
.header-actions {
  ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  li {
    margin-left: .9375rem;
    font-size: 1em;
  }
}

// 侧边栏菜单样式
.sider-menu {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    &:hover {
      color: $educ-color-primary;
      cursor: pointer;
    }
  }

  .active {
    color: $educ-color-primary;
  }
}

// 头部操作项样式
.header-action-item {
  &.active {
    color: $educ-color-primary;
  }

  &:hover {
    color: $educ-color-primary;
    cursor: pointer;
  }
}

@media screen and (width <=30rem) {
  .header-notice {
    display: none;
  }

  .header-actions {
    li {
      margin: .0625rem;
      font-size: .625rem;
    }
  }
}

@media screen and (width <=20rem) {
  .header-actions {
    li {
      font-size: .625rem;
    }
  }
}
</style>
